<template>
  <div class="login">
    <!-- 登录面板 -->
    <div class="login-box">
      <div class="login-box-title">个人网上银行</div>
      <div class="login-box-from">
        <el-form ref="ruleForm" :model="ruleForm" :rules="rules" class="demo-ruleForm">
          <el-form-item prop="phone">
            <el-input v-model="ruleForm.phone" placeholder="请输入手机号" size="medium">
              <el-button slot="prepend" icon="el-icon-user" />
            </el-input>
          </el-form-item>
          <el-form-item prop="ruleForm.code">
            <el-input v-model="ruleForm.code" placeholder="请输入6位验证码" size="medium" style="postion: relative">
              <el-button slot="prepend" icon="el-icon-key" />
            </el-input>
            <a
              class="code"
              style="
                text-decoration: none;
                position: absolute;
                right: 8px;
                top: -1px;
                color: blue;
              "
              :class="{ onclick: OnClick }"
              @click="postCode()"
            >{{ OnClickMsg }}</a>
            <p
              style="color: red;
                font-size: 15px;
                margin-left: 4px;
                margin-bottom: 5px;
              "
            >
              {{ errormsg }}
            </p>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" size="medium" style="width: 48%" @click="submitForm('ruleForm')">确定登录
            </el-button>
            <el-button type="primary" size="medium" style="width: 48%" @click="cancle()">取消登录
            </el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>
<script>
import { getCode, loginPhone } from '@/api/api'
import jwt_decode from 'jwt-decode'
export default {
  data() {
    return {
      ruleForm: {
        phone: '',
        code: ''
      },
      rules: {
        phone: [
          {
            required: true,
            pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
            message: '请输入正确的11位手机号码',
            trigger: 'blur'
          }
        ],
        code: [
          {
            required: true,
            message: '请输入6位验证码',
            trigger: 'blur'
          }
        ]
      },
      errormsg: '',
      OnClick: false, // 是否可以点击获取验证码
      OnClickMsg: '获取验证码', // 验证码按钮文字
      time: 60, // 倒计时时间
      cookie: ''
    }
  },
  mounted() {
    console.log('this.ruleForm.phone', this.ruleForm.phone)
  },

  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          // alert('submit!')
          //
          // localStorage.setItem("token","12fdsafafadsfads")
          // localStorage.setItem("role","1")
          // this.$router.push({ path: this.redirect || '/' })
          this.loading = true
          loginPhone(1, { 'userPhone': this.ruleForm.phone, 'code': this.ruleForm.code }).then(res => {
            console.log(res.data.responseStatusCode)
            if (res.data.responseStatusCode == 200) {
              console.log('res.data.token', res.data.data)
              localStorage.setItem('token', res.data.data)
              localStorage.setItem('role', 1)
              const decode = jwt_decode(res.data.data) // 解析
              localStorage.setItem('username', JSON.parse(decode.user).userName)
              localStorage.setItem('bankCard', JSON.parse(decode.user).bankCard)
              this.$message({
                showClose: true,
                message: res.data.message,
                type: 'success'
              })
              console.log(this.redirect)
              this.$router.push({ path: this.redirect || '/' })
              this.loading = false
            } else {
              this.$message({
                showClose: true,
                message: res.data.message,
                type: 'error'
              })
              this.loading = false
            }
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    // clickBtn() {
    //   // 发送验证码模块
    //   // const code = document.querySelector('.code')
    //   // console.log(code)
    //   // code.innerHTML = '60秒后重新获取'
    //   // let num = 60
    //   // const timer = setInterval(function () {
    //   //   num--
    //   //   code.innerHTML = `${num}秒后重新获取`
    //   //   if (num < 0) {
    //   //     clearInterval(timer)
    //   //     code.innerHTML = '重新获取'
    //   //   }
    //   // }, 1000)

    // },
    // 获取验证码
    postCode: function() {
      console.log(111111);
      const _this = this
      var regMoblie = /^1[3|4|5|6|7|8|9][0-9]\d{8}$/
      console.log("rule",regMoblie.test(_this.ruleForm.phone));
      if (!regMoblie.test(_this.ruleForm.phone)) {
        this.$message.error('请输入手机号')
        return
      } else {
        getCode(_this.ruleForm.phone).then(res => {
          if (res.data.responseStatusCode == 200) {
            this.$message({
              message: res.data.message,
              type: 'success'
            })
            _this.OnClick = true // 禁止点击获取验证码
            _this.countdown() // 倒计时
          } else {
            this.$message.error(res.data.message)
          }
        })
      }
    },
    // 60s倒计时
    countdown: function() {
      const _this = this
      if (_this.time == 0) {
        _this.OnClickMsg = '获取验证码'
        _this.time = 60
        _this.OnClick = false
        return
      }
      setTimeout(function() {
        _this.countdown()
      }, 1000)
      _this.time--
      _this.OnClickMsg = _this.time + 's重新获取'
    },
    cancle() {
      this.$router.push('/')
    }
  }
}
</script>
<style scoped>
.login {
  width: 100%;
  height: 100%;
  /* display: flex;
    justify-content: center;
    align-items: center;
    background-image: url('../../assets/image/login.jpg');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    color: #cccccc; */
  position: relative;
  background-color: #f7f7f7 !important;
}

.login-bg {
  width: 100%;
  height: 100%;
  background: #3e3e3e;
}

.login-box {
  width: 350px;
  /* height: 287px; */
  background: hsla(0, 0%, 100%, 0.3);
  border-radius: 5px;
  box-shadow: 0 0 2px #f7f7f7;
  border: 1px solid #f7f7f7;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -175px;
  margin-top: -150px;
}

.login-box-title {
  line-height: 50px;
  font-size: 20px;
  color: #707070;
  text-align: center;
  border-bottom: 1px solid #ffffff;
}

.login-box-from {
  width: 100%;
  height: auto;
  padding: 30px;
  box-sizing: border-box;
}

.onclick {
  /* background-color: #999 !important; */
  pointer-events: none;
  cursor: default;
}
</style>

